import React, { Component } from 'react'
import './index.scss';
import abc1 from '../../img/logo.png'
import {
    Form,
    Input,
    Button,
    Toast
} from 'antd-mobile'
import { loginAction } from '../../store/actions/user';
import { getSmsCode, login } from '../../api/user';
import { connect } from 'react-redux';
class Login extends Component {
    constructor() {
        super();
        this.state = {
            phone: "",
            smsCode: "",
            disabled: true,
            btnText: "获取验证码"
        }
        this.timer = null;
    }
    //接收input框的数据
    changeInput = (type, val) => {
        // console.log(type, val);
        this.setState({
            [type]: val
        })
        if (type == 'phone') {
            const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
            if (reg.test(val)) {
                this.setState({ disabled: false })
            } else {
                this.setState({ disabled: true })
            }
        }
    }

    //获取验证码
    getSmsCode = () => {
        Toast.show({
            content: '验证码已发送，请注意查收',
        })
        //调用 获取验证码的接口
        getSmsCode(this.state.phone).then(res => {
            console.log(res);
            if (res.data.code === 666) {
                //按钮倒计时,按钮置灰
                this.setState({ disabled: true })
                let num = 60;
                this.timer = setInterval(() => {
                    num--;
                    this.setState({ btnText: `重新获取(${num})` });
                    if (num <= 0) {
                        clearInterval(this.timer);
                        this.setState({ btnText: "重新获取", disabled: false })
                    }
                }, 1000)
            }
        })
    }

    //登录操作
    loginFn = () => {
        const { phone, smsCode } = this.state;
        login(phone, smsCode).then(res => {
            if (res.data.code === 666) {
                console.log(res);
                //将用户信息和token保存到 redux
                this.props.loginAction(res.data.result);
                //页面跳转
                this.props.history.push('/');
            }
        })
    }

    //在页面卸载前结束没结束的定时器
    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render() {
        const { phone, smsCode, disabled, btnText } = this.state;
        return (
            <div>
                <div className="tou">
                    <img src={abc1} alt={2} />
                    <p>旺仔旺铺</p>
                </div>
                <Form
                    layout='horizontal'
                    footer={
                        <Button block type='submit' color='primary' size='large' onClick={this.loginFn}>
                            登录
                        </Button>
                    }
                >
                    <Form.Item
                        name='phone'
                        rules={[{ required: true, message: '手机号不能为空' }]}
                    >
                        <Input onChange={(val) => { this.changeInput('phone', val) }} name="phone" placeholder='请输入手机号' value={phone} />
                    </Form.Item>
                    {/* <Form.Item>
                        
                    </Form.Item> */}

                    <Form.Item
                        name='smsCode'
                        rules={[{ required: true, message: '验证码不能为空' }]}
                    >
                        <Input onChange={(val) => { this.changeInput('smsCode', val) }} name="smsCode" value={smsCode} placeholder='请输入验证码' />
                        <Button type="button" style={{ width: '97px', position: 'absolute', top: '10px', left: '250px', lineHeight: '15px', fontSize: '14px', background: '#ccc', border: 'none', color:'#1f1f21'}} color="primary" disabled={disabled} onClick={this.getSmsCode} >{btnText}</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

export default connect(
    state => ({ user: state.user }), {
    loginAction
}
)(Login);

/*
    1. 写一下登录页面\表单元素
    2. 表单元素需要验证，
    3. 验证通过,电泳后台接口
    4. 后台 报错,显示提示信息
    5. 如果后台不报错，登录成功，需要将 用户数据、token 保存到 redux（redux做了持久化操作）或者保存到缓存，
    6. 登录成功后，页面跳转到用户中心

    注意：第一次登录 ，后台对应的是注册新用户的操作，以后的每次登录 都知识登录操作


*/
